<template>
  <el-card style="max-width: 100%" shadow="hover">
    <span>
      <h2 class="card-title">评论审核</h2>
    </span>
 
  </el-card>
  <el-card style="max-width: 100%">
    <template #header>
      <div class="card-header">
        <div>
          <el-input v-model="query.comment_description" style="width: 240px" placeholder="输入想查询的关键字" />&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button default type="primary" :icon="Search" @click="onSubmit">查询</el-button>
        </div>
        <div class="select_right">
          <el-button default type="success" size="small" @click="multAgree">
            批量通过
          </el-button>
          <el-button default type="danger" size="small" @click="OpenPassDialog1">
            批量拒绝
          </el-button>
        </div>
      </div>
    </template>
    <!--内容呈现部分-->
    <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="comment_id" label="评论ID" width="150" />
      <el-table-column prop="comment_description" label="评论详情" width="300" />
      <el-table-column prop="comment_time" label="评论时间" width="220" />
      <el-table-column fixed="right" label="操作" width="170">
        <template #default="scope">    <!--自定义内容 在template内加上#default-->
          <el-button default type="success" size="small" @click="singleAgree(scope.row.comment_id)">
            通过
          </el-button>
          <el-button default type="danger" size="small" @click="OpenPassDialog(scope.row.comment_id)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>


  <!--对话框：拒绝-->
  <el-dialog
      v-model="PassDialogVisible"
      title="填写拒绝理由"
      width="600"
      align-center
  >
    <el-form-item label="提交的修改存在：" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.check_info">
        <el-checkbox value="昵称具有敏感词" name="type">
          昵称具有敏感词
        </el-checkbox>
        <el-checkbox value="头像不符合要求" name="type">
          头像不符合要求
        </el-checkbox>
        <el-checkbox value="自我介绍具有敏感词" name="type">
          自我介绍具有敏感词
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="PassDialogVisible = false">取消</el-button>
        <el-button default type="primary" @click="Reason()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>


  <!--多次拒绝的对话框-->
  <el-dialog
      v-model="PassDialogVisible1"
      title="填写拒绝理由"
      width="600"
      align-center
  >
    <el-form-item label="提交的修改存在：" :label-width="formLabelWidth">
      <el-checkbox-group v-model="form.check_info">
        <el-checkbox value="昵称具有敏感词" name="type">
          昵称具有敏感词
        </el-checkbox>
        <el-checkbox value="头像不符合要求" name="type">
          头像不符合要求
        </el-checkbox>
        <el-checkbox value="自我介绍具有敏感词" name="type">
          自我介绍具有敏感词
        </el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button default @click="PassDialogVisible = false">取消</el-button>
        <el-button default type="primary" @click="multuReason()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>



<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import {Search} from "@element-plus/icons-vue";
export default{
  computed: {
    Search() {
      return Search
    }
  },
  components:{
    Search
  },
  data(){
    return{
      commentIdList:[],
      commentInfoList:[],
      num :0 ,
      form:{             //拒绝对象
        check_info:[],
        comment_id: null,
      },    //用于存储点击按钮后获取行数据
      formLabelWidth: '180px',  //对话框宽度
      large:true,
      background: true,
      PassDialogVisible:false,     //拒绝对话框默认为关闭
      PassDialogVisible1:false,      //多选拒绝对话框
      multipleTableRef:[],    //多选框
      query:{                 //查询条件
        user_name:"",
        comment_id:null,
      },
      tableData:[]              //用户个人信息数据
    }
  },
  methods:{
    OpenPassDialog(comment_id){
      this.PassDialogVisible = true;
      this.form.comment_id = comment_id;
    },
    OpenPassDialog1(){
      this.PassDialogVisible1 = true;
    },
    //拒绝时填写备注
    multuReason() {
      this.form.check_info=this.form.check_info.join(',');
      this.commentInfoList= this.multipleTableRef.map(item => item.check_info = this.form.check_info)
      this.commentIdList= this.multipleTableRef.map(item => item.comment_id);
      console.log(this.commentInfoList);
      console.log(this.commentIdList);
      this.$http.post("http://localhost:8080/comment/updateMultCheck_info",{
        checks_info: this.commentInfoList,
        comments_id:this.commentIdList
      }).then((res) => {
        if (res.data !== 0) {
          ElMessage({
            message: "拒绝发送成功！",
            type: "success",
          })
        } else {
          ElMessage({
            message: "拒绝发送失败！",
            type: "success"
          })
        }
        this.LoadUpdateCommentData();
        this.PassDialogVisible1 = false;
        this.form = {};

      })
          .catch(function (err) {
            console.log(err);
          })
    },
    Reason(){
      this.form.check_info=this.form.check_info.join(',');
      console.log(this.form.check_info);
      console.log(this.form.comment_id);
      this.$http.post("http://localhost:8080/comment/updateCheck_info?check_info="+this.form.check_info+"&comment_id="+this.form.comment_id).then((res)=>{
        if(res.data !==0){
          this.PassDialogVisible = false;
          this.LoadUpdateCommentData();
          this.form = {};
          ElMessage({
            message:"拒绝发送成功！",
            type:"success",
          })
        }else{
          ElMessage({
            message:"拒绝发送失败！",
            type:"success"
          })
        }
      }).catch(function (err) {
        console.log(err);
      });
    },
    //修改数据的审核状态
    //一次多同意多个数据
    multAgree(){
      var num = 0;
      ElMessageBox.confirm(
          '确定通过多条数据?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ) .then(() => {
        this.commentIdList= this.multipleTableRef.map(item => item.comment_id),
            this.$http.post("http://localhost:8080/comment/updateMutlStatus", {
              comments_id: this.commentIdList
            }).then((res) => {
              console.log(res.data);
              num = res.data ;
              if (num !== 0) {
                ElMessage({
                  message: "审批成功"+num+"条记录",
                  type: "success"
                })
                this.LoadUpdateCommentData();
              }
              else {
                ElMessage({
                  message: "审批失败！",
                  type: "success"
                })
              }
            })
      })
          .catch(function (err) {
            console.log(err);
          })
    },

    singleAgree(comment_id){
      this.scope = this.tableData.filter(row => row.comment_id === comment_id);
      console.log(comment_id);
      ElMessageBox.confirm(
          '确定通过?',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            this.$http.post("http://localhost:8080/comment/updateStatus/" + comment_id).then((res) => {
              if (res.data == 1) {
                ElMessage({
                  message: "审批成功！",
                  type: "success"
                })
                this.LoadUpdateCommentData();

              } else {
                ElMessage({
                  message: "审批失败！",
                  type: "success"
                })
              }
            }).catch(function (err) {
              console.log(err);
            })
          })
    },

    handleSelectionChange(val){       //多行选择
      this.multipleTableRef = val   //multipleTableRef是一个对象数组
      console.log(this.multipleTableRef);
    },

    onSubmit(){                     //查询提交
      console.log(this.query);
      this.LoadUpdateCommentData();
    },

    //跨域连接查询用户信息修改的数据对接
    LoadUpdateCommentData(){
      this.$http.get("http://localhost:8080/comment/checkcomment"
          ,{params:{
              comment_description:this.query.comment_description,
       //   user_id:this.query.user_id,
       }}
      ).then((res)=>{
        this.tableData = res.data;
        console.log(this.tableData)
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  //被挂载,调用自定义函数
  mounted() {
    this.LoadUpdateCommentData()
  }
}
</script>


<style>
.select_right{
  display: flex;
  justify-content: right;
}
</style>

